<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
	  xmlns:social="https://spring.io/springsocial"
	  xmlns:layout="https://github.com/ultraq/thymeleaf-layout-dialect">
	<head>
		<title>Spring Social Showcase</title>
		<link rel="stylesheet" th:href="@{/resources/page.css}" type="text/css" media="screen"></link>
		<link rel="stylesheet" th:href="@{/resources/form.css}" type="text/css" media="screen"></link>
		<link rel="stylesheet" th:href="@{/resources/messages/messages.css}" type="text/css" media="screen"></link>
	</head>
	<body>
		<div id="header">
			<h1><a th:href="@{/}">Spring Social Showcase</a></h1>
		</div>
		
		<div id="leftNav">
			<h4><a th:href="@{/connect}">Connections</a></h4>
			
			<h4><a th:href="@{/twitter}">Twitter</a></h4>
			<div social:connected="twitter">
			<ul class="menu">
				<li><a th:href="@{/twitter}">User Profile</a></li>
				<li><a th:href="@{/twitter/timeline}">Timeline</a></li>
				<li><a th:href="@{/twitter/friends}">Friends</a></li>
				<li><a th:href="@{/twitter/followers}">Followers</a></li>
				<li><a th:href="@{/twitter/messages}">Messages</a></li>
				<li><a th:href="@{/twitter/trends}">Trends</a></li>
				<li><a th:href="@{/twitter/revoked}">Sim Revoked</a></li>
			</ul>
			</div>
			<h4><a th:href="@{/facebook}">Facebook</a></h4>
			<div social:connected="facebook">
			<ul class="menu">
				<li><a th:href="@{/facebook}">User Profile</a></li>
				<li><a th:href="@{/facebook/feed}">Feed</a></li>
				<li><a th:href="@{/facebook/friends}">Friends</a></li>
				<li><a th:href="@{/facebook/albums}">Albums</a></li>
				<li><a th:href="@{/facebook/expired}">Sim Expired</a></li>
			</ul>
			</div>
			
			<h4><a th:href="@{/linkedin}">LinkedIn</a></h4>
			<div social:connected="linkedin">
			<ul class="menu">
				<li><a th:href="@{/linkedin}">User Profile</a></li>
				<li><a th:href="@{/linkedin/connections}">Connections</a></li>
			</ul>
			</div>
		</div>
		
		<div id="content" layout:fragment="content">
			Content goes here
		</div>		
	</body>
</html>
